<template>
	<view class="">
		<view class="xxnmtabbar">
			<view class="H_tabbars" :style="{'height':info.height+'rpx','background':info.tabbarbg}">
				<view class="H_tabbar" v-for="(item,index) in list" @click="jump(index)">
					<image :style="{'width':info.image+'rpx','height':info.image+'rpx'}" v-if="info.select_index==index" :src="$api.img(item.selectedIconPath,$api.img_type().xxnmdiypages_tabbar)" mode=""></image>
					<image :style="{'width':info.image+'rpx','height':info.image+'rpx'}" v-else :src="$api.img(item.iconPath,$api.img_type().xxnmdiypages_tabbar)" mode=""></image>
					<text :style="{'font-size':info.fontSize+'rpx','color':info.select_index==index?info.selectedColor:info.color}">{{item.text}}</text>
				</view>
			</view>
			<view class="H_safeAreaInsets" :style="{height:bottom+'px','background':info.tabbarbg}"></view>
		</view>
		<view class="xxnmtabbar_zanwei">
			<view class="H_tabbars" :style="{'height':info.height+'rpx'}"></view>
			<view class="H_safeAreaInsets" :style="{height:bottom+'px'}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "xxnmtabbar",
		props: {
			list: {
				default: []
			},//tabbar列表{pagePath:跳转路径,selectedIconPath:选中图片,iconPath:未选中图片,text:文字}
			info: {
				'select_index': '0',//当前页tabbar下标
				'height': '100',//tabbar高度
				'image': '52',//图片宽高
				'fontSize': '24',//文字大小
				'tabbarbg': '#FFFFFF',//tabbar背景色
				"color": "#000",//文字颜色
				"selectedColor": "#FFA158"//选中文字颜色
			}
		},
		data() {
			return {
				bottom: 0,//底部安全区域
			};
		},
		created() {
			this.bottom = uni.getSystemInfoSync().safeAreaInsets.bottom > 0 ? uni.getSystemInfoSync().safeAreaInsets.bottom : 0
		},
		methods: {
			jump(index) {
				if (index == this.info.select_index) {
					return
				}
				uni.reLaunch({
					url: this.list[index].pagePath
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.xxnmtabbar_zanwei {
	}
	.xxnmtabbar {
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: column;
		z-index: 999999;
		.H_tabbars {
			width: 750rpx;
			display: flex;
			align-items: center;

			.H_tabbar {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.H_safeAreaInsets {
			width: 750rpx;
		}
	}
</style>
